<template>
    <div style="display: flex; padding: 20px; justify-content: space-evenly;">
        <a @click="createService(0)">
            <Tooltip placement="top" content="fedEx">
                <img src="@/image/fedEx.png">
            </Tooltip>
        </a>
        <a @click="createService(1)">
            <Tooltip placement="top" content="ups">
                <img src="@/image/ups.png">
            </Tooltip>
        </a>
        <a @click="createService(2)">
            <Tooltip placement="top" content="other">
                <img src="@/image/other.png">
            </Tooltip>
        </a>
    </div>
</template>

<script>
import { HttpCarrierList } from '@/service/api/views';
import { mapGetters } from "vuex";

export default {
    props: ['product'],
    components: {
    },
    data(){
        return {
            carrierList:[],
            carrier: {},
            selectProduct: {},
        }
    },
    watch: {
        product: {
            deep: true,
			immediate: true,
            handler(val) {
                this.selectProduct = val;
            },
        },
    },
    created(){
        HttpCarrierList({'search[EQ_active]': 1}).then(res=>{
            this.carrierList = res.data.map(item=>{
                return {
                    value:item.carrierCode,
                    label:item.carrierCode+' ('+item.carrierName+')',
                    attach: item
                }
            })
        })
    },
	computed: {
	},
    methods:{
        createService(obj){
            switch (obj){
                case 0:
                    this.carrier = this.carrierList.find(item=>item.value == 'FedEx')
                    break;
                case 1:
                    this.carrier = this.carrierList.find(item=>item.value == 'UPS')
                    break;
                case 2:
                    this.carrier = {}
                    break;
            }
            const url = this.$router.resolve({
                name: 'tmsLogisticsProductsUpdate',
                params: {type: 'add'},
                query: obj == 2 ? { code: this.selectProduct.carrierGroupCode, carrierGroupId: this.selectProduct.id, } : { code: this.selectProduct.carrierGroupCode, carrierGroupId: this.selectProduct.id, carrier: this.carrier.value, carrierId: this.carrier.attach.id},
            });
            window.open(url.href, '_blank');
            this.$emit('on-success')
        }
    }
}
</script>
